<style>
.chat-bubble {
  background-color: #fff;
  border: .1rem solid #76be35;
  padding: .5rem;
  position: relative;
  max-width: 12rem;
  color: #76be35;
}
.chat-bubble:before,
.chat-bubble:after {
  content: ' ';
  display: block;
  position: absolute;
  bottom: -1rem;
  left: 1rem;
  width: 0;
  height: 0;
  border: .5rem solid transparent;
  border-top-color: #76be35;
}
.chat-bubble:after {
  border-top-color: #fff;
  bottom: -.85rem;
}
</style>
<div class="content">
  <div class="list">
    <div class="item">
      <div class="content">
        <div class="space-sm">
          <div class="chat-bubble"><strong>子曰：</strong>学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？</div>
        </div>
        <div><pre class="prettyprint"><code>&lt;div class=&quot;chat-bubble&quot;&gt;&lt;strong&gt;&#x5b50;&#x66f0;&#xff1a;&lt;/strong&gt;&#x5b66;&#x800c;&#x65f6;&#x4e60;&#x4e4b;&#xff0c;&#x4e0d;&#x4ea6;&#x8bf4;&#x4e4e;&#xff1f;&#x6709;&#x670b;&#x81ea;&#x8fdc;&#x65b9;&#x6765;&#xff0c;&#x4e0d;&#x4ea6;&#x4e50;&#x4e4e;&#xff1f;&#x4eba;&#x4e0d;&#x77e5;&#x800c;&#x4e0d;&#x6120;&#xff0c;&#x4e0d;&#x4ea6;&#x541b;&#x5b50;&#x4e4e;&#xff1f;&lt;/div&gt;</code></pre></div>
        <div><pre class="prettyprint"><code>.chat-bubble {
  background-color: #fff;
  border: .1rem solid #76be35;
  padding: .5rem;
  position: relative;
  max-width: 12rem;
  color: #76be35;
}
.chat-bubble:before,
.chat-bubble:after {
  content: ' ';
  display: block;
  position: absolute;
  bottom: -1rem;
  left: 1rem;
  width: 0;
  height: 0;
  border: .5rem solid transparent;
  border-top-color: #76be35;
}
.chat-bubble:after {
  border-top-color: #fff;
  bottom: -.85rem;
}</code></pre></div>
      </div>
     </div>
  </div>
</div>
